<template>
	<div id="organization_info" class="container">
		<div class="content">
			<!-- <div class="title">{{title}}</div> -->
			<div class="panel">
				<el-form :model="param" ref="param" :label-width="labelWidth">
					<el-form-item label="机构名称" :rules="[{ required: true, message: '' }]">
						<el-input clearable style="width: 4.5rem" v-model="param.orgName" placeholder="请输入机构名称" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="机构类型" :rules="[{ required: true, message: '' }]">
						<el-select style="width: 4.5rem" v-model="param.orgMode" :disabled="true" clearable placeholder="请选择机构类型">
							<el-option v-for="item in orgModeList" :key="item.name" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="机构电话">
						<el-input clearable style="width: 4.5rem" maxlength="12" :disabled="!isEdit" v-model="param.phone" placeholder="请输入机构电话，如：020-12345678"></el-input>
					</el-form-item>
					<el-form-item label="机构logo">
						<el-upload class="avatar-uploader" style="margin-top:0.36rem;" :action="uploadUrl" :show-file-list="false" :disabled="!isEdit" :data="uploadData" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers" :on-error="uploadError" accept=".jpg, .png">
							<img @click="clickPic(false)" v-if="imgUrl_44" :src="imgUrl_44" class="avatar" />
							<img @click="clickPic(false)" :disabled="isEdit" src="../../assets/img/system_set/def_logo1.jpg" v-else />
							<div slot="tip" class="el-upload__tip" style="line-height: 0.3rem;margin-top:-0.1rem;font-size:0.14rem;">44x44</div>
						</el-upload>
						<el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :disabled="!isEdit" :data="uploadData" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers" :on-error="uploadError" accept=".jpg, .png">
							<img @click="clickPic(true)" v-if="imgUrl_202" :src="imgUrl_202" class="avatar" />
							<img @click="clickPic(true)" :disabled="isEdit" src="../../assets/img/system_set/def_logo2.jpg" v-else />
							<div slot="tip" class="el-upload__tip" style="line-height: 0.3rem;margin-top:-0.1rem;font-size:0.14rem;padding-left:0.7rem">210x82</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="所属公司">
						<el-input clearable :disabled="!isEdit" style="width: 4.5rem" v-model="param.belongCompany" placeholder="请输入所属公司"></el-input>
					</el-form-item>
					<el-form-item label="机构所在地区">
						<el-cascader clearable :disabled="!isEdit" :props="defaultProps" style="width: 4.5rem" :options="citys" v-model="param.regionAddress"></el-cascader>
					</el-form-item>
					<el-form-item label="机构详细地址">
						<el-input clearable :disabled="!isEdit" style="width: 4.5rem" maxlength="50" v-model="param.detailedAddress" placeholder="请输入机构详细地址"></el-input>
					</el-form-item>
					<el-form-item label="负责人" :rules="[{ required: true, message: '' }]">
						<el-input clearable :disabled="true" style="width: 4.5rem" v-model="param.adminUserName" placeholder="请输入负责人姓名"></el-input>
					</el-form-item>
					<el-form-item label="手机号" :rules="[{ required: true, message: '' }]">
						<el-input clearable :disabled="true" style="width: 4.5rem" type="text" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" onpaste="return false;" v-model="param.adminPhone" placeholder="请输入负责人手机号，并为该机构管理员账号"></el-input>
					</el-form-item>
					<el-form-item label="合作类型" :rules="[{ required: true, message: '' }]">
						<el-select style="width: 4.5rem" :disabled="true" v-model="param.cooperateOrgMode" @change="orgModeChange" clearable placeholder="请选择合作类型">
							<el-option v-for="item in cooperationModeList" :key="item.name" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="服务期限" v-if="param.cooperateOrgMode != 1" :rules="[{ required: true, message: '' }]">
						<el-row style="width: 4.5rem">
							<el-col :span="10">
								<el-date-picker type="date" :disabled="true" placeholder="开始日期" 
									v-model="param.serveStartTime" style="width: 100%;" value-format="yyyy-MM-dd">
								</el-date-picker>
							</el-col>
							<el-col style="text-align: center;" :span="3">-</el-col>
							<el-col :span="11">
								<el-date-picker type="date" :disabled="true" placeholder="结束日期"
									 v-model="param.serveEndTime" style="width: 100%;" value-format="yyyy-MM-dd">
								</el-date-picker>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="备注">
						<el-input clearable style="width: 4.5rem" :disabled="!isEdit" maxlength="50" v-model="param.remark" placeholder="请输入补充说明信息"></el-input>
					</el-form-item>
				</el-form>
				
				<template v-if="hasApi('orgUpdate')">
					<div class="btn_div" v-if="isEdit">
						<div class="btn_sure" @click="sure()">保 存</div>
						<div class="btn_cancel" @click="cancel()">取 消</div>
					</div>
					<div class="btn_div" v-else>
						<div class="btn_sure" @click="isEdit=true;">编 辑</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import citys from "@/../static/citys.json";
	var vm, user, dict;
	export default {
		data: function() {
			return {
				title: this.$route.name,
				labelWidth : 5.14*rem + 'px',
				isEdit : false, //是否编辑模式
				citys: citys,
				isTwo: false,
				//logo图片临时路径
				imgUrl_44: "",
				imgUrl_202: "",
				//机构对象和备份
				param: {},
				param2 :{},
				//数组字段
				cooperationModeList: null,
				orgModeList: null,
				//配置信息
				uploadData: {
					content: "orglogo"
				},
				uploadUrl: config.baseUrl + "/file/upload",
				defaultProps: {
					label: "label",
					value: "label",
					children: "children"
				},
				headers: {
					token: tool.getItem(lsKey.token)
				}
			};
		},
		methods: {
			clickPic(isTwo) {
				vm.isTwo = isTwo;
			},
			orgModeChange: function(val) {
				if(val == 1) {
					vm.param.serveStartTime = "1946-02-14";
					vm.param.serveEndTime = "2999-12-30";
				} else {
					vm.param.serveStartTime = "";
					vm.param.serveEndTime = "";
				}
			},
			uploadError: function(response, file) {
				console.log("上传文件失败response" + response);
			},
			handleAvatarSuccess(res, file) {
				if(res.status != "success") {
					this.$message.error("上传文件失败，" + res.data.result);
				} else {
					if(!vm.isTwo) {
						this.imgUrl_44 = res.data.url;
					} else {
						this.imgUrl_202 = res.data.url;
					}
				}
			},
			beforeAvatarUpload(file) {
				console.log(file);
				const isJPG = file.type === "image/jpeg" || "image/png";
				const isLt2M = file.size / 1024 / 1024 < 2;

				if(!isJPG) {
					this.$message.error("上传logo图片只能是 JPG/PNG 格式!");
					return false;
				}
				if(!isLt2M) {
					this.$message.error("上传logo图片大小不能超过 2MB!");
					return false;
				}
				let fontSize;
				if(!vm.isTwo) {
					fontSize = "44x44";
				} else {
					fontSize = "210x82";
				}

				const isSize = new Promise(function(resolve, reject) {
					let width = fontSize.split("x")[0];
					let height = fontSize.split("x")[1];
					let _URL = window.URL || window.webkitURL;
					let image = new Image();
					image.onload = function() {
						let value = image.width == width && image.height == height;
						value ? resolve() : reject();
					};
					image.src = _URL.createObjectURL(file);
				}).then(
					() => {
						return file;
					},
					() => {
						tool.message({
							showClose: true,
							message: "上传logo图片尺寸不符合，应为" + fontSize,
							type: "warning"
						});
						return Promise.reject();
					}
				);
				return isSize;
			},
			search : function() {
				api.orgInfo({orgId: user.orgId}).then(function(data) {
					//获取机构对象
					var d = data.organization;
					//临时字段: 区域地址和详细地址
					d.regionAddress = [];
					d.detailedAddress = "";
					//剪切地址,重新拼接
					let str = d.orgAddr.split("/");
					if(str.length > 1) {
						d.regionAddress.push(str[0], str[1], str[2]);
						d.detailedAddress = str[3];
					} else {
						d.detailedAddress = d.orgAddr;
					}
					//设置logo图片临时路径
					if(d.logoLinker != "") {
						vm.imgUrl_44 = d.logoLinker.split(",")[0];
						vm.imgUrl_202 = d.logoLinker.split(",")[1];
					} else {
						vm.imgUrl_44 = "";
						vm.imgUrl_202 = "";
					}
					vm.param = d;
					vm.param2 = tool.clone(d);
				})
			},
			cancel : function() {
				vm.param = tool.clone(vm.param2);
				vm.isEdit = false;
			},
			sure: function() {
				var rules = [{			
					judge : (vm.imgUrl_44 && vm.imgUrl_202) || vm.imgUrl_44 == vm.imgUrl_202,
					tips : "如需上传机构logo，则必须上传两种分辨率的logo"
				}]
				
				if(!tool.validate(rules)) {
					return;
				}
				
				//拼接地址
				if(vm.param.regionAddress.length > 0) {
					vm.param.orgAddr = vm.param.regionAddress.join("/") + "/" + vm.param.detailedAddress;
				} else {
					vm.param.orgAddr = vm.param.detailedAddress;
				}
				//拼接logo路径
				if(vm.imgUrl_44) {
					vm.param.logoLinker = vm.imgUrl_44 + "," + vm.imgUrl_202;
				}
				api.orgUpdate(vm.param).then(function(data) {
					//重新查询
					vm.search();
					tool.message({ message: "保存成功", type: "success" });
					vm.isEdit = false;
				});
			}
		},
		created: function() {
			vm = this;
			
			user = tool.getItem(lsKey.user, true); //得到当前用户信息
			//获取数据字典
			dict = tool.getItem(lsKey.dict, true);
			vm.cooperationModeList = dict["cooperate_org_mode"];
			vm.orgModeList = dict["organization_type"];
			//查询机构
			vm.search();
		}
	};
</script>
<style lang="scss">
#organization_info {
	.el-form-item__label {
		font-size: 0.16rem !important;
	}
	.el-input__inner {
		font-size: 0.16rem !important;
	}
	.el-form-item {
		margin-bottom: 0.18rem !important;
	}
}
</style>
<style scoped src="@/style/system_set/organization_info.css"></style>
